<style scoped lang="scss">
.feedback-con{
  margin: 20rpx;
  padding: 30rpx 25rpx 60rpx 25rpx;
  background: #FFFFFF;
  border-radius: 20rpx;

  & > view{
    &:nth-child(1){

      & > view{
        margin-bottom: 60rpx;
        & > view{
          &:nth-child(1){
            display: flex;
            align-items: center;
            margin-bottom: 26rpx;
            & > view{
              &:nth-child(1){
                width: 6rpx;
                height: 27rpx;
                background: #567AED;
                border-radius: 3rpx;
              }
              &:nth-child(2){
                margin-left: 12rpx;
                font-size: 28rpx;
                color: #101012;
              }
            }
          }
          &:nth-child(2){}
        }
      }
    }
    &:nth-child(2){
      height: 84rpx;
      line-height: 84rpx;
      background: #577BED;
      border-radius: 45rpx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }
  }
}

.feed-type{
  display: flex;
  & > view{
    width: 168rpx;
    height: 48rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    border: 1rpx solid #EAEAEA;
    font-size: 24rpx;
    color: #798288;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &:last-child{
      margin-right: 0;
    }

    &.active{
      background: #EEF3FF;
      border: 1rpx solid #577BED;
      color: #577BED;
    }
  }
}

.feed-text{
  padding: 23rpx 34rpx;
  background: #F6F6F6;
  border-radius: 20rpx;

  textarea{
    height: 300rpx;
  }
  view{
    text-align: right;
    color: #101012;
    font-size: 24rpx;
  }
}

.feed-phone{
  padding: 23rpx 34rpx;
  background: #F6F6F6;
  border-radius: 20rpx;
}

.btn{
  text-align: center;
  height: 84rpx;
  line-height: 84rpx;
  background: #577BED;
  border-radius: 42rpx;
  font-size: 32rpx;
  color: #FFFFFF;
}
</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head :back="true">
        意见反馈
      </h-head>
    </view>

    <view class="s-body">
      <scroll-view class="maxh" :scroll-y="true">

        <view class="feedback-con">
          <view>
            <view>
              <view class="c-tit">
                <view></view>
                <view>反馈类型</view>
              </view>
              <view class="feed-type">
                <view @click="form.type = 1" :class="{active: form.type === 1}">故障</view>
                <view @click="form.type = 2" :class="{active: form.type === 2}">建议</view>
                <view @click="form.type = 3" :class="{active: form.type === 3}">投诉</view>
              </view>
            </view>
            <view>
              <view class="c-tit">
                <view></view>
                <view>反馈内容</view>
              </view>
              <view class="feed-text">
                <textarea v-model="form.content" placeholder="请输入您的反馈内容" maxlength="300"></textarea>
                <view>{{form.content.length}}/300</view>
              </view>
            </view>
            <view>
              <view class="c-tit">
                <view></view>
                <view>联系方式</view>
              </view>
              <view class="feed-phone">
                <input v-model="form.phone" type="text" maxlength="11" placeholder="请输入您的联系方式">
              </view>
            </view>
          </view>

          <view class="btn" @click="sure">立即提交</view>

        </view>

        <view style="height: 60rpx"></view>

      </scroll-view>
    </view>
  </view>
</template>

<script>

export default {
  components: {
  },
  onShow() {
  },
  onLoad(option) {

  },
  data() {
    return {
      form: {
        type: 1,
        content: '',
        phone: ''
      }
    };
  },
  methods: {
    sure() {
      if(!this.form.content) {
        return this.utils.toast('请输入您的反馈内容')
      }

      this.httpClient.post({
        url: this.APIPath.feedback.add,
        data: this.form
      }).then(res => {
        this.form.type = 1
        this.form.content = ''
        this.form.phone = ''
        this.utils.toast('提交成功')
      }, err => {
      })
    }
  },
};
</script>

